<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" type="text/css" href="css/common.css">
    <link rel="stylesheet" type="text/css" href="css/cart.css">
    <title>购物车</title>
</head>
<body>
    <div class="top-header">
        <a href="login.html" class="top-item" style="color: #888;">登录</a>
        <a href="register.html" class="top-item" style="color: #888;">注册</a>
    </div>
    <div class="bottom-header">
        <div class="bottom-content">
            <div style="flex:1;">
                <a href="index.html">
                    <img src="./img/logo.gif" width="150" height="50">
                    </a>
            </div>
            <div style="flex:2; text-align: center;">
                <input type="text" placeholder="请输入查询关键词" class="input">
                <button type="button" class="btn">搜索</button>
            </div>
            <div class="cart-btn" style="flex:1; text-align: right;position: relative;">
            <a href="">
                <img src="./img/Shopping-cart-1@3x.png" style="width: 20px; height: 20px;" alt="">
            </a>
            <div class="cart-box">
                <h3>购物车</h3>
                <div style="display: flex;align-items: center;">
                    <div style="padding: 0px 10px;">
                        <img src="./img/88714a586ee6444e9aa5fe9540b7b891.jpg" width="50" height="50" alt="">
                    </div>
                    <div style="font-size: 12px;">
                        <p class="text-hidden">
                            <span style="color: red;">1</span><span>寻真水果 山东烟台正宗红富士苹果</span>
                        </p>
                        <p style="text-align: left; color: red;">5.7</p>
                    </div>
                </div>
                <div class="cart-bottom">
                    <div class="left">
                        <span>共：￥8.9</span>
                    </div>
                    <div class="right">
                        <span>查看购物车</span>
                    </div>
                </div>
            </div>
            </div>
        </div>
    </div>
    <section class="header-title">
        <div class="title-content">
            <p>我的购物车</p>
            <a href="index.html" style="color: #303133;"><b>首页</b></a>><span>购物车</span>
        </div>
    </section>
    <div class="cart-body">
        <div class="cart-left">
            <table cellpadding="0" cellspacing="0">
                <tr style="height: 50px;">
                    <th style="width: 800px;text-align: left;padding-left: 15px;">产品名称</th>
                    <th style="width: 200px;">数量</th>
                    <th style="width: 200px;">合计价格</th>
                    <th style="width: 100px;"></th>
                </tr>
                <tr>
                    <td>
                        <div class="product-name">
                            <img src="./img/815694ff3aeb40379e50721301d79701.jpg" width="50" height="50" alt="">
                            <a href="">寻真水果山东烟台大苹果</a>
                        </div>
                    </td>
                    <td>
                        <div style="display: flex; flex-direction: column;align-items: center;margin-top: 20px;">
                        <div class="input-number">
                            <span  style="border-top-left-radius: 4px;border-bottom-left-radius: 4px;" class="input-number-operation">-</span>
                            <input style="color: #666;"  class="input-number-center" type="text" value="1" />
                            <span  style="border-top-right-radius: 4px;border-bottom-right-radius: 4px;" class="input-number-operation">+</span>
                        </div>
                        <div>
                            <span>x￥5.7</span>
                        </div>
                    </div>
                    </td>
                    <td style="text-align: center;">
                        <b>￥8.9</b>
                    </td>
                    <td>
                        <div class="button button-star">
                            <img src="./img/Shopping-bag-3@3x.png" width="20" height="20">
                        </div>
                    </td>
                </tr>
            </table>
            <div style="text-align: right;margin-top: 10px;">
                <button class="button button-delete">
                    <img class="before-img" src=""  alt="">
                    <img class="after-img" src=""   alt="">
                    <span>清空购物车</span>
                </button>
                <button class="button button-success" type="button">√更新购物车</button>
            </div>
        </div>
       <div class="cart-right">
                   <div class="text-info">
                       <b>商品总价</b>
                       <span>￥1999</span>
                   </div>
                   <div class="text-info">
                       <span>物流费用</span>
                       <span>包邮</span>
                   </div>
                   <hr style="margin: 20px 0;">
                   <div class="text-info">
                       <b>合计金额:</b>
                       <span style="font-size: 20px;">￥1999</span>
                   </div>
                   <div style="text-align: right;">
                       <button class="button button-success" type="button">√立即支付</button>
                   </div>
               </div>
           </div>
           <div class="footer">
               <p>全国高校职院校web应用软件开发技能竞赛</p>
    </div>
</body>
</html>